import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { Layout } from 'antd'
import AppLayout from './components/Layout/AppLayout'
import Login from './pages/Login'
import Dashboard from './pages/Dashboard'
import RoutesManagement from './pages/RoutesManagement'
import Monitoring from './pages/Monitoring'
import Logs from './pages/Logs'
import AuthConfig from './pages/AuthConfig'
import RateLimitConfig from './pages/RateLimitConfig'
import SystemConfig from './pages/SystemConfig'
import { useAuthStore } from './store/authStore'

const { Content } = Layout

function PrivateRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated } = useAuthStore()
  return isAuthenticated ? <>{children}</> : <Navigate to="/login" />
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route
          path="/*"
          element={
            <PrivateRoute>
              <AppLayout>
                <Content style={{ padding: '24px', background: '#f0f2f5' }}>
                  <Routes>
                    <Route path="/" element={<Dashboard />} />
                    <Route path="/routes" element={<RoutesManagement />} />
                    <Route path="/monitoring" element={<Monitoring />} />
                    <Route path="/logs" element={<Logs />} />
                    <Route path="/auth" element={<AuthConfig />} />
                    <Route path="/rate-limit" element={<RateLimitConfig />} />
                    <Route path="/config" element={<SystemConfig />} />
                  </Routes>
                </Content>
              </AppLayout>
            </PrivateRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  )
}

export default App


